<template>
  <div class="sub-dropdown">
    <div class="left">玩法</div>
    <div class="center dropdown" @click="showMoreLotteryOptions">
      <div class="center-content">
        <div class="main-wrapper">
          <div class="main">{{getCurrentMainTab.mainTabName}}</div>
          <div class="arrow"></div>
        </div>
        <div class="sub-wrapper">
          <div class="sub">{{getCurrentTab.subTabName}}</div>
          <span class="icon">
            <i class="iconfont iconty_zhankai"></i>
          </span>
        </div>
      </div>
    </div>
    <div class="right" v-show="getShowRadioSelector">
      <radio-selector @click="updateActiveSwitchIndex" :activeSwitchIndex="getRadioSelectorIndex"></radio-selector>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
import RadioSelector from '@/components/base/radio-selector/radio-selector'
export default {
  components: {
    RadioSelector 
  },
  methods: {
    showMoreLotteryOptions() {
      this.setShowSideSlider(true)
    },
    updateActiveSwitchIndex(index) {
      this.setRadioSelectorIndex(index)
      this.$emit('click', index)
    },
    ...mapMutations('lottery', {
      setShowSideSlider: 'SET_SHOW_SIDE_SLIDER',
      setRadioSelectorIndex: 'SET_RADIO_SELECTOR_INDEX'
    })
  },
  computed: {
    ...mapGetters('lottery', ['getCurrentMainTab', 'getCurrentTab', 'getShowRadioSelector', 'getRadioSelectorIndex'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@import '~@/assets/styles/mixins.styl'
  .sub-dropdown 
    display flex
    height 36px
    align-items center
    background-color #fff
    box-sizing border-box 
    padding-left 10px
    .left 
      color $color-theme-red 
      margin-right 10px
    .center 
      border-left 1px solid $color-divide-line
      border-right 1px solid $color-divide-line
      .center-content 
        display flex
        align-items center
        box-sizing border-box 
        padding 0 10px
        .main-wrapper 
          display flex 
          align-items center
          .main 
            margin-right 2px 
        .sub-wrapper  
          display flex 
          align-items center
          .sub 
            margin-left 8px 
            margin-right 10px 
      .arrow 
        margin-bottom 1px
        width 6px
        height 6px
        border-right 1px solid $color-theme-dark
        border-bottom 1px solid $color-theme-dark
        transform rotate(-45deg)
      .icon 
        extend-click()
        .iconfont 
          font-size 12px
          color $color-theme-red
    .right 
      flex 1
      display flex 
      justify-content flex-end 
    .right >>> .selector 
      margin-right 10px !important
</style>